<template>
    <div>
        <ul>
            <li v-for="(item, index) in navArr" :key="index">
                <!-- 展示路由 -->
                <router-link :to="item.path">
                    {{ item.meta.title }}
                </router-link>
            </li>
        </ul>


    </div>
</template>

<script>
export default {
    name: "NavRouter",
    data() {
        return {
            navArr: this.$router.options.routes
        }
    },
}
</script>

<style scoped>
ul {
    width: 80%;
    height: 60px;
    margin: 0 auto;
    background-color: cornflowerblue;
    display: flex;
    justify-content: space-around;
    list-style: none;
}

ul li {
    width: 100px;
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
}

ul li a {
    text-decoration: none;
}

ul li:hover {
    background-color: blueviolet;
}
</style>